<template>
  <el-card class="box-card">
    <el-table :data="skuList" border class="table">
      <el-table-column type="index" label="序号" width="50" align="center" />
      <el-table-column prop="skuName" label="名称" align="center" />
      <el-table-column prop="skuDesc" label="描述" align="center" />
      <el-table-column label="图片" width="240">
        <template v-slot="{ row }">
          <img :src="row.skuDefaultImg" alt="" style="width:150px">
        </template>
      </el-table-column>
      <el-table-column prop="price" label="价格（元）" align="center" />
      <el-table-column prop="weight" label="重量（kg）" align="center" />

      <el-table-column label="操作" width="400">
        <template v-slot="{ row }">
          <el-button
            type="success"
            icon="el-icon-top"
            size="medium"
            @click="shangjia(row)"
          >上架</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :current-page="currentPage"
      :page-sizes="[10, 12, 14, 16]"
      :page-size="pageSize"
      layout="prev, pager, next, jumper, total, sizes"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
</template>

<script>
import { reqGetSkuList } from '@/api/product/sku'
export default {
  name: 'Sku',
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 0,
      skuList: [
        {
          // id: 7247,
          // spuId: 5618,
          // price: 555,
          // skuName: '嗯？',
          // skuDesc: '好玩？',
          // weight: '42.00',
          // tmId: null,
          // category3Id: 328,
          // skuDefaultImg:
          //   'http://47.93.148.192:8080/group1/M00/02/40/rBHu8mFliVeAC_kNAADe90wa65U268.jpg',
          // isSale: 0,
          // createTime: '2021-10-12 22:16:08',
          // skuImageList: null,
          // skuAttrValueList: null,
          // skuSaleAttrValueList: null
        }
      ]
    }
  },
  mounted() {
    this.getSkuList()
  },
  methods: {
    // 上架
    shangjia(row) {
      console.log(row)
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.getSkuList()
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.getSkuList()
    },
    async getSkuList() {
      const { currentPage, pageSize } = this
      const { data } = await reqGetSkuList(currentPage, pageSize)
      // console.log(data);
      this.skuList = data.records
      this.total = data.total
    }
  }
}
</script>

<style lang="scss" scoped></style>
